<template>
    <div class="row" id="myVue"  v-cloak>
        <div class="col-lg-10 col-lg-offset-1" >
            <div class="contenter">
                <ul>
                    <li>
                        <el-row>
                            <span class="addAddressCons">收货人信息</span>
                            <span class="addAddress" @click="AddressShowClick">新增收货地址</span>
                        </el-row>
                        <div class="scolleShow" >
                            <el-row  class="consignee" v-for="(items,index) in filterAddress"  >
                                <div v-on:mouseout="MouseOutList(items)" v-on:mouseleave="MouseOverList(items)">
                                    <el-col :span='4'>
                                        <div class="consigneeList consigneeListWidth"  :class="{'consigneeListClick':items.addressDefult}" @click="currentIndexClick(items,index)">
                                            <span v-text="items.name"></span>
                                            <span v-text="items.city"></span>
                                            <div v-show="items.addressDefult">
                                                <div class="arrow-right"></div>
                                                <i class="fa fa-check" aria-hidden="true"></i>
                                            </div>
                                        </div>
                                    </el-col>
                                    <el-col class='rightAddress'  :span='20' :class='{BackColor:items.addressIsShow}'>
                                        <span v-text="items.name"></span>
                                        <span v-text="items.city"></span>
                                        <span v-text="items.area"></span>
                                        <span v-text="items.minarea"></span>
                                        <span v-text="items.phone"></span>
                                        <span v-if='items.isShowDefult' class="addressDefultClass">默认地址</span>
                                        <span v-if='items.addressIsShow' class='edmitAddre' ></span>
											<span class='edmitSpan' @click="defultAddress(items)">设为默认地址</span>
											<span class='edmitSpan' @click="emitAddress(items,index)">编辑</span>
										<span v-if='!items.isShowDefult' @click="deleAddressAlert(index)" class='edmitSpan edmitSpan-delete' >删除</span>
                                    </el-col>
                                    <div class="clearfix"></div>
                                </div>
                            </el-row>
                        </div>
                        <el-dialog
                                title="新增收货地址"
                                :visible.sync="newAddressShow"
                                width="30%"
                        >
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="收货人" >
                                    <el-input v-model="form.name" placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <el-form-item label="所在地区" >
                                    <el-input v-model="form.city" placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <el-form-item label="详细地址" >
                                    <el-input v-model="form.minarea" placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码" >
                                    <el-input v-model="form.phone" placeholder="请输入内容"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-checkbox-group v-model="form.isShowDefult">
                                        <el-checkbox  label="设为默认地址" name="type">设为默认地址</el-checkbox>
                                    </el-checkbox-group>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
									<el-button @click="newAddressShow = false" type='danger'>取 消</el-button>
									<el-button type="primary" @click="saveNewAdress(edmitType)">保存</el-button>
								</span>
                        </el-dialog>
                        <div v-if='!moreAddressData.length == 0' class="muchAddress">
								<span @click="moreAddress">更多地址
									<transition name="fade"  mode="out-in">
										<i key='up' v-if='isTranShow' class="fa fa-angle-double-down" ></i>
										<i key='down' v-else class="fa fa-angle-double-up" ></i>
									</transition>
								</span>
                        </div>
                        <div v-if='moreAddressData.length == 0' class="noAddress" >
                            <span>您还没有收货地址，请增加新的收货地址！</span>
                        </div>
                    </li>
                    <li>
                        <span class="addAddressCons">支付方式</span>
                        <div class="consignee">
								<span class="consigneeList" v-for="(paymentDatas,index) in paymentdatas" :class="{'consigneeListClick':paymentIndex == index}" @click="paymentIndex=index">
									<span v-text="paymentDatas.name"></span>
									<div v-show="paymentIndex == index">
										<div class="arrow-right"></div>
										<i class="fa fa-check" aria-hidden="true"></i>
									</div>
								</span>
                        </div>
                    </li>
                    <li>
                        <span class="addAddressCons">送货清单</span>
                        <span class="addAddress"><a href="ShoppingCart.html">返回修改购物车</a></span>
                        <div class="row deliverymode">
                            <div class="col-lg-3 deliverymodeLeft">
                                <p>配送方式：</p>
                                <div v-for="(deliverymodeDatas,index) in deliverymodedatas"  >
									 	<span class="consigneeList" @click="deliverymodeIndex=index" :class="{'consigneeListClick':deliverymodeIndex == index}">
											<span v-text="deliverymodeDatas.type" ></span>
											<div v-show="deliverymodeIndex == index">
												<div class="arrow-right"></div>
												<i class="fa fa-check" aria-hidden="true"></i>
											</div>
										</span>
                                    <p class="deliverymodeLeftTit" v-text="deliverymodeDatas.name"></p>
                                </div>
                            </div>
                            <div class="col-lg-9 deliverymodeRight" >
                                <div class="layui-form">
                                    <table class="layui-table">
                                        <tr>
                                            <td>
									        	<span class="goodName">
													<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
												</span>
                                                <span class="goodName goodsName">
													<h2 class="goodname"></h2>
													<p class="goodGary">
														<span>供应商：</span>
														<span>美国</span>
													</p>
													<p class="goodGary">
														<span>发货地：</span>
														<span>中国</span>
													</p>
												</span>
                                            </td>
                                            <td class="goodPrice">￥344534.00</td>
                                            <td class="goodNum">1</td>
                                        </tr>
                                        <tr>
                                            <td>
									        	<span class="goodName">
													<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
												</span>
                                                <span class="goodName goodsName">
													<h2 class="goodname"></h2>
													<p class="goodGary">
														<span>供应商：</span>
														<span>美国</span>
													</p>
													<p class="goodGary">
														<span>发货地：</span>
														<span>中国</span>
													</p>
												</span>
                                            </td>
                                            <td class="goodPrice">￥344534.00</td>
                                            <td class="goodNum">1</td>
                                        </tr>

                                    </table>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="contenterFooter">
                <p>1件商品，1项服务，总金额：<span class="footerPrice">￥9600.00</span></p>
                <p>运费：<span class="footerPrice">￥100.00</span></p>
                <p>优惠：<span class="footerPrice footercouponPrice">{{couponPrice | moneyFiler}}</span></p>
            </div>
            <div class="clearfix"></div>
            <div class="row footerRow">
                <span class="footerRowprice">应付金额：<span>￥9999.00</span></span>
                <span class="footerRowaddress"><span>商品收获地址：{{moreaddressCity + moreaddressArea + moreaddressMinarea}}</span><span>{{moreaddressName}}</span><span>18347460829</span></span>
            </div>
            <button class="btn submitForm">提交订单</button>
        </div>


    </div>
</template>

<script>
    /*模拟数据*/
    var shopCartdatas = {
        shopcartdatas:[
            {
                "checked":false,
                "src":"../img/CivilMilitaryIntegration/img4.jpg",
                "name":"GZL-中控离心机净化机",
                "supplier":"美国",
                "ConPlace":"中国大陆",
                "price":100,
                "num":1,
                "saveandremove":true,
                "type":"商品",
            },
            {
                "checked":false,
                "src":"../img/CivilMilitaryIntegration/img4.jpg",
                "name":"GZL-中控离心机净化机",
                "supplier":"美国",
                "ConPlace":"中国大陆",
                "price":100,
                "num":2,
                "saveandremove":true,
                "type":"商品",
            },
            {
                "checked":false,
                "src":"../img/CivilMilitaryIntegration/img4.jpg",
                "name":"GZL-中控离心机净化机",
                "supplier":"美国",
                "ConPlace":"中国大陆",
                "price":100,
                "num":3,
                "saveandremove":true,
                "type":"服务",
            },
            {
                "checked":false,
                "src":"../img/CivilMilitaryIntegration/img4.jpg",
                "name":"GZL-中控离心机净化机",
                "supplier":"美国",
                "ConPlace":"中国大陆",
                "price":100,
                "num":4,
                "saveandremove":true,
                "type":"商品",
            },
            {
                "checked":false,
                "src":"../img/CivilMilitaryIntegration/img4.jpg",
                "name":"GZL-中控离心机净化机",
                "supplier":"美国",
                "ConPlace":"中国大陆",
                "price":600,
                "num":5,
                "saveandremove":true,
                "type":"服务",
            },
        ]
    }
    var addressdatas = {
        addressdata:[
            {
                name:"111111111111",
                city:"北京市",
                area:"丰台区",
                minarea:"嘉园一里9号楼1",
                phone:18347460829,
                addressDefult:false,
                addressIsShow:false,
                isShowDefult:false,
            },
            {
                name:"222222222222",
                city:"北京市",
                area:"丰台区",
                minarea:"嘉园一里9号楼2",
                phone:18347460829,
                addressDefult:false,
                addressIsShow:false,
                isShowDefult:false,
            },
            {
                name:"3333333333",
                city:"北京市",
                area:"丰台区",
                minarea:"嘉园一里9号楼1",
                phone:18347460829,
                addressDefult:false,
                addressIsShow:false,
                isShowDefult:false,
            },
            {
                name:"444444444",
                city:"北京市",
                area:"丰台区",
                minarea:"嘉园一里9号楼2",
                phone:18347460829,
                addressDefult:false,
                addressIsShow:false,
                isShowDefult:false,
            },
            {
                name:"555555555",
                city:"北京市",
                area:"丰台区",
                minarea:"嘉园一里9号楼3",
                phone:18347460829,
                addressDefult:true,
                addressIsShow:false,
                isShowDefult:true,
            },

        ]
    }
    var payment = {
        paymentdata:[
            {
                "name":"货到付款",
            },
            {
                "name":"在线支付",
            },
            {
                "name":"银行汇款",
            },
        ]
    }
    var invoice = {
        invoicedata:[
            {
                "name":"不要发票",
            },
            {
                "name":"需要发票",
            },
        ]
    }
    var Coupon = {
        Coupondata:[
            {
                "price":500,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":100,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":200,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":500,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":100,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":200,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":200,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":200,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
            {
                "price":200,
                "time":"2017-08-30",
                "type":"[ 店铺类 ]",
                "types":"[ 店铺类 ]",
            },
        ]
    }
    var deliverymode = {
        deliverymodeData:[
            {
                "type":"自提",
                "name":"选择自提时，请与卖家协商取货地址。",
            },
            {
                "type":"物流",
                "name":"由卖家发货。",
            },
        ]
    }
    var dialogs = [
        {id:1,name:'收货人'},
        {id:2,name:'所在地区'},
        {id:3,name:'详细地址'},
        {id:4,name:'手机号码'},
        {id:5,name:'收货人'},


    ]
    export default {
        name: "createOrder",
        data() {
            return {
                    /*数据源*/
                    dialogs:dialogs,
                    shopTableDatas:shopCartdatas.shopcartdatas,
                    moreAddressData:addressdatas.addressdata,//地址数据
                    paymentdatas:payment.paymentdata,//支付类型数据
                    deliverymodedatas:deliverymode.deliverymodeData,//配送类型数据
                    invoicedatas:invoice.invoicedata,//发票类型数据
                    Coupondatas:Coupon.Coupondata,//优惠券数据
                    userBuyData:[],//用户购买数据

                    /*默认选择标签*/
                    checkedAll:false, //全选状态
                    limitNum:1,//默认显示几个地址
                    currentIndex:0,//地址默认选择
                    paymentIndex:1,//支付类型默认选择
                    deliverymodeIndex:1,//配送类型默认选择
                    invoiceIndex:1,//发票类型默认选择
                    CouponIndex:-1,//优惠券默认选择
                    stopDelete:"",//定时器id(用于清空定时器)
                    activeName: '支付平台',

                    /*关键字段初始化*/
                    moreaddressName:"",//收货人姓名
                    moreaddressCity:"",//收货人所在市
                    moreaddressArea:"",//收货人所在区
                    moreaddressMinarea:"",//收货人所在小区
                    couponPrice:0,//优惠券默认金额
                    goodNums:0,    //商品或者服务总数
                    totalMoney:0, //总价格
                    saveandremove:true,//收藏和取消收藏的状态
                    goodsNum:0,//商品的数量
                    serviceNum:0,//服务的数量
                    form: {
                        name:'',
                        city:'',
                        area:'',
                        minarea:'',
                        phone:'',
                        addressDefult:'',
                        addressIsShow:'',
                        num:'',
                        isShowDefult:''
                    },
                    newAddressShow:false,//新增收货地址显示
                    dialogVisible: false,//编辑、新增对话状态
                    edmitType:'',
                    isTranShow:true,
            }
        },
        methods: {
            /*商品数量增加减少函数*/
            goodNum:function(item,way){
                if(way == 1){
                    item.num++;
                    vm.countTotalMoney()
                }else{
                    if(item.num < 2){
                        item.num =1;
                    }else{
                        item.num--;
                        vm.countTotalMoney()
                    }

                }
            },
            /*单选函数*/
            checkedRadioBtn:function(tabledatas){
                this.countTotalMoney()
                /*单选计算商品或服务数量*/
                if(tabledatas.type == "商品" && tabledatas.checked == true){
                    this.goodsNum += 1;
                }else if(tabledatas.type == "服务" && tabledatas.checked == true){
                    this.serviceNum += 1;
                }else if(tabledatas.type == "商品" && tabledatas.checked == false){
                    this.goodsNum -= 1;
                }else if(tabledatas.type == "服务" && tabledatas.checked == false){
                    this.serviceNum -= 1;
                }else{
                    console.log("未知错误！")
                }
            },
            /*全选函数*/
            checkedAllBtn:function(checkedAll){
                var _this= this;
                /*全选计算商品或服务数量*/
                if(checkedAll == true){
                    for(x in this.shopTableDatas){
                        this.shopTableDatas[x].checked = true;
                        if(this.shopTableDatas[x].type == "商品" ){
                            _this.goodsNum += 1;
                        }else if(this.shopTableDatas[x].type == "服务" ){
                            _this.serviceNum += 1;
                        }
                    }
                }else{
                    for(y in this.shopTableDatas){
                        this.shopTableDatas[y].checked = false;
                        this.goodsNum = 0;
                        this.serviceNum = 0;
                    }
                }
                vm.countTotalMoney();
            },
            /*删除单个选中函数*/
            deletegoods:function(index){
                console.log(index);
                this.shopTableDatas.splice(index, 1);
                vm.countTotalMoney();
            },
            /*删除多个选中函数*/
            deleteSelectAll:function(){
                for(var i = this.shopTableDatas.length-1 ; i >= 0 ; i--){
                    if(this.shopTableDatas[i].checked  == true){
                        this.shopTableDatas.splice(i, 1);
                    }
                }
                vm.countTotalMoney();
            },
            /*单个移到收藏*/
            movesSave:function(index){
                this.shopTableDatas.splice(index,1)
            },
            /*多个商品移动函数*/
            saveSelectAll:function(){
                for(var i = 0 ; i <= this.shopTableDatas.length ; i++){
                    if(this.shopTableDatas[i].checked  == true){
                        console.log(this.shopTableDatas[i])
                        this.stopDelete = setTimeout(function(){
                            vm.deleteSelectAll();
                            clearInterval(this.stopDelete)
                        },10);
                    }
                }
            },
            /*计算商品总价函数*/
            countTotalMoney:function(){
                var _this = this;
                _this.totalMoney = 0;
                this.shopTableDatas.forEach(function(item,index){
                    if(item.checked == true){
                        _this.totalMoney += item.num*item.price
                    }
                })
            },
            /*保存购买数据*/
            saveData:function(){
                var _this = this;
                _this.userBuyData.length = 0;
                this.shopTableDatas.forEach(function(item,index){
                    if(item.checked == true){
                        window.location.href='../CivilMilitaryIntegration/ShoppingCartAdress.html'
                    }
                })
            },
            /*删除收货地址函数*/
            deleAddress:function(index){
                this.moreAddressData.splice(index, 1);

            },
            /*优惠券点击函数*/
            CouponIndexClcik:function(index,price){
                this.CouponIndex = index;
                this.couponPrice = price;

            },
            //初始化地址
            initAddress:function(){
                for(y in this.moreAddressData){
                    if(this.moreAddressData[y].addressDefult == true){
                        tem = this.moreAddressData[y];
                        index=y;
                    }
                }
                this.moreAddressData.splice(index, 1)
                this.moreAddressData.unshift(tem)
            },
            //设置为默认收货地址
            defultAddress:function(item){
                var tem,index;
                for(x in this.moreAddressData){
                    this.moreAddressData[x].isShowDefult = false;
                }
                item.isShowDefult = true;
                for(y in this.moreAddressData){
                    if(this.moreAddressData[y].isShowDefult == true){
                        tem = this.moreAddressData[y];
                        index=y;
                    }
                }
                this.moreAddressData.splice(index, 1)
                this.moreAddressData.unshift(tem)
            },
            /*地址点击函数*/
            currentIndexClick:function(item,index){
                for(x in this.moreAddressData){
                    this.moreAddressData[x].addressDefult = false;
                }
                item.addressDefult = true;
                this.currentIndex = index;
                this.moreaddressName = item.name;
                this.moreaddressCity = item.city;
                this.moreaddressArea = item.area;
                this.moreaddressMinarea = item.minarea;
            },
            //新增收货地址函数
            AddressShowClick:function(){
                this.edmitType = '新增',
                    this.newAddressShow = true;
            },
            //新增收货地址和编辑收货地址  保存函数
            saveNewAdress:function(){
                if(this.edmitType == '新增'){
                    if(this.form.isShowDefult == true){
                        for(x in this.moreAddressData){
                            this.moreAddressData[x].isShowDefult = false;
                        }
                        this.moreAddressData.unshift(this.form)
                        this.clearEdmitAddress()
                    }else{
                        this.moreAddressData.push(this.form)
                        this.clearEdmitAddress()
                    }
                    this.newAddressShow = false;
                }else if(this.edmitType == '修改'){
                    if(this.form.isShowDefult == true){
                        for(x in this.moreAddressData){
                            this.moreAddressData[x].isShowDefult = false;
                        }
                        this.moreAddressData.splice(this.form.num,1,this.form);
                        for(y in this.moreAddressData){
                            if(this.moreAddressData[y].isShowDefult == true){
                                tem = this.moreAddressData[y];
                                index=y;
                            }
                        }
                        this.moreAddressData.splice(index, 1)
                        this.moreAddressData.unshift(tem)
                        this.clearEdmitAddress()
                    }else{
                        this.moreAddressData.splice(this.form.num,1,this.form)
                        this.clearEdmitAddress()
                    }
                    this.newAddressShow = false;

                }
            },
            //编辑收货地址函数
            emitAddress:function(item,index){
                this.newAddressShow = true;
                this.edmitType = '修改';
                //把此行数据到对话框
                this.form.name = item.name
                this.form.city = item.city
                this.form.area = item.area
                this.form.minarea = item.minarea
                this.form.phone = item.phone
                this.form.addressDefult = item.addressDefult
                this.form.addressIsShow = item.addressIsShow
                this.form.isShowDefult = item.isShowDefult
                this.form.num = index


            },
            /*鼠标移动函数显示：默认地址、编辑、删除*/
            MouseOutList:function(moreaddressData){
                moreaddressData.addressIsShow = true;
            },
            MouseOverList:function(moreaddressData){
                moreaddressData.addressIsShow = false;
            },
            //点击更多地址函数
            moreAddress:function(){
                if(this.limitNum == 1){
                    this.limitNum = this.moreAddressData.length;
                    this.isTranShow = !this.isTranShow;
                }else{
                    this.limitNum = 1;
                    this.isTranShow = !this.isTranShow;
                    var tem,index;
                    for(y in this.moreAddressData){
                        if(this.moreAddressData[y].addressDefult == true){
                            tem = this.moreAddressData[y];
                            index=y;
                        }
                    }
                    this.moreAddressData.splice(index, 1)
                    this.moreAddressData.unshift(tem)
                }
            },
            //清空当前收货操作
            clearEdmitAddress:function(){
                this.form = {name:'',city:'',area:'',minarea:'',phone:'',addressDefult:'',addressIsShow:'',num:'',isShowDefult:''}
            },
            /*提示删除单个商品*/
            alertRadio:function(index){
                this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                        callback : vm.deletegoods(index)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '已取消删除'
                    });
                });
            },
            /*提示多个删除函数*/
            alertMuch:function(){
                this.$confirm('此操作将永久删除已选择商品或服务, 是否继续?', '提示', {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                        callback : vm.deleteSelectAll()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'warning',
                        message: '已取消删除'
                    });
                });
            },

            /*提示单个商品移动到收藏函数*/
            alertmovesSavegoods:function(index){
                this.$confirm('此操作将已选择商品或服务移到我的收藏, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '收藏成功!',
                        callback : vm.movesSave(index)
                    });
                }).catch(() => {
                    this.$message({
                        type: 'success',
                        message: '收藏成功!',
                    });
                });
            },
            /*提示收藏多个商品函数*/
            alertMuchgoods:function(){
                this.$confirm('此操作将已选择商品或服务移到我的收藏, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '收藏成功!',
                        callback : vm.saveSelectAll()
                    });
                }).catch(() => {
                    this.$message({
                        type: 'success',
                        message: '收藏成功!',
                    });
                });
            },
            //提示删除收货地址函数
            deleAddressAlert:function(index) {
                this.$confirm('此操作将永久删除该地址, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!',
                        callback:vm.deleAddress(index),
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //对话框询问是否关闭
        },
        created() {
        },
        mounted:function(){
            this.$nextTick(function(){
                this.initAddress();
            })
        },
        /*金额过滤器*/
        filters:{
            moneyFiler:function(value){

                return "￥"+value.toFixed(2);
            }
        },
        /*用于过滤缓存(用于过滤地址显示几个)*/
        computed:{
            filterAddress:function(){
                return this.moreAddressData.slice(0,this.limitNum)
            }
        },
    }
</script>

<style scoped>
    /*nav*/
    .row{margin-left: 0px;margin-right: 0px;}
    .toper_nav{background: white;border-bottom: 1px solid #DEDEDE;}
    .toper_btm_nav, .toper_nav{float: left;}
    .logoTit{margin-left: 20px;}
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12{padding-right: 0px;padding-left: 0px;}
    /*tooper*/
    .layui-tab-title{border-bottom: 0px;}
    .layui-tab-title li{color: white;margin-top: -5px;margin-right: 50px;vertical-align:inherit;}
    .toper_btm_nav{height:45px;background: #05226C;}
    .layui-tab-brief>.layui-tab-title .layui-this{border-radius: 15px;color: #05226C;height: 35px;background: white;padding-bottom: 5px;}
    .layui-tab-title .layui-this:after{height:38px ;line-height: 38px;}
    .toper_btm{line-height: 18px;}
    .toper_btm img{margin-top: 15px;}
    .erweimaImg{float: right;}
    .erweimaCont{margin-left: -8px;font-size: 12px;}
    .toper_tit{font-size: 16px;font-weight: bold;}
    /*content*/
    #myVueAddress{padding-bottom: 100px;}
    .contenterTit{padding: 15px 0px;font-size: 15px;}
    .contenter{border: 1px solid #EDEDED;padding: 0px 15px 20px 15px}
    .contenter ul li{border-bottom: 1px solid #EDEDED;padding:20px 0px 20px 0px;}



    /*收货地址及返回购物车*/
    .addAddressCons{font-weight: bold;}
    .addAddress{float: right;color:#05226C ;cursor: pointer;}
    .addAddress a{color: #05226C;cursor: pointer;}
    .edmitSpan{padding: 0px 5px;}
    .rightAddress{height: 31px;line-height: 31px;margin-top: 10px;padding: 0px 20px;}
    /*更多地址*/
    .DefaultAddress{padding: 4px 10px;background: #a3a3a3;color: white;cursor: pointer;font-size: 12px;}
    .muchAddress{margin-top: 20px;color: #999999;cursor: pointer;width: 75px;margin-left: 15px;}
    .muchAddress .fa-angle-double-down{margin-left: 3px;}
    .noAddress{margin-top: -40px;color: red;cursor: pointer;margin-left: 15px;}
    /*送货方式*/
    .deliverymode{margin-top: 15px;}
    .deliverymodeLeft{background: #f1f1f1;max-width: 270px;padding: 10px 10px 39px 10px;}
    .deliverymodeRight{background: #f9f9f9;padding: 11px 0px;}
    .deliverymodeLeft .consigneeList span{width: 60px;display: block;text-align: center;}
    .deliverymodeLeft .deliverymodeLeftTit{padding: 5px 0px 10px 0px}
    .deliverymodeRight table tr td{border: 0px;background: #f9f9f9;padding: ;}
    .deliverymodeRight table tr td img{width: 100%;margin-top: -11px;}
    .goodName{display: inline-block;}
    .goodsName{margin-left: 10px;}
    .goodGary{color: #999999;text-align: left;}
    .goodname{font-language-override: 16px;}
    .goodPrice{color: red;font-weight: bold;}
    .goodNum{font-weight: bold;}
    .scolleShow{max-height: 250px;overflow: auto;min-height: 60px;}

    /*公司信息*/
    .CompanyInformation{margin-right: 20px;margin-top: 10px;display: inline-block;}
    .modify{color:#05226C ;cursor: pointer;}

    /*优惠券*/
    .contenter .couponconts{border-bottom: 0px;}
    .coupon{width: 200px;height: 140px;display: block;border: 2px solid #EDEDED;display: inline-block;margin: 20px 60px 0px 0px;position: relative;cursor: pointer;}
    .couponDiv{width: 100%;height: 100px;background:#cccccc ;padding: 20px;color: #bbbbbb;}
    .couponprice{font-size: 20px;}
    .coupontime{margin-top: 10px;}
    .coupontype{display: block;text-align: center;width: 100%;height: 40px;line-height: 40px;color: #bbbbbb;}
    .couponDivClick{background: #209ceb;color: white;}
    .coupontypeClick{color:#209ceb ;}
    .couponcontShow{max-height: 332px;overflow: auto;}
    .addressDefultClass{border: 1px solid #EDEDED;padding: 3px 7px;border-radius: 4px;color: #EDEDED;}
    .edmitAddre{float: right;}

    /*金额抵用函数*/
    .totalRow{height: 40px;background: #f1f1f1;line-height: 40px;padding-left:18px ;}

    /*底部信息*/
    .contenterFooter{float: right;text-align: right;margin-top: 20px}
    .footerPrice{display:inline-block;width: 80px;text-align: left;font-weight: bold;color: #999999;}
    .footercouponPrice{color: #2da41e;}
    .footerRow{margin-top: 20px;text-align: right;background: #f1f1f1;padding-left:18px ;}
    .footerRowprice{padding: 10px;display: block;}
    .footerRowprice span{color: red;font-weight: bold;font-size: 16px;}
    .footerRowaddress{display: block;padding: 0px 0px 10px 0px;color: #999999;}
    .footerRowaddress span{margin-right: 10px;}

    /*tab标签样式*/
    .consignee{padding: 5px 15px;cursor: pointer;}
    .consigneeList{ border: 1px solid #999999;margin-right: 20px;padding: 5px 17px;display: inline-block;margin-top: 10px;cursor: pointer;position: relative;height: 31px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
    .consigneeListWidth{width: 100%;}
    .consigneeListRight{padding: 0px 20px;}
    .BackColor{background: #05226C;color: white;}
    /*.consignee:hover .consigneeListRight{

    }*/
    /*tab标签点击样式*/
    .consigneeListClick{border: 1px solid #05226C;}

    /*三角形*/
    .arrow-right {position: absolute;transform: rotate(45deg);right: -2px;bottom: -10px;width:0; height:0; border-top:15px solid transparent;border-bottom: 15px solid transparent;border-left: 15px solid #05226C;}
    .fa-check{color: black;position:;color: black;position: absolute;right: 0px;bottom: 0px;color: white;font-size: 12px;}

    /*提交表单按钮*/
    .submitForm{float: right;margin-top: 30px;margin-bottom: 100px;padding: 8px 30px;background: #209ceb;color: white;border-radius: 0px;}
    .submitForm:hover{color: white;}


    /*动画效果*/
    .fade-enter-active, .fade-leave-active {
        transition: all 1s ;
    }
    .fade-enter,  /* .fade-leave-active in below version 2.1.8 */ {
        opacity: 1;
        transform: rotate(180deg);
    }
    .fade-leave-to{
        opacity: 1;
        transform: rotate(180deg);
    }

</style>
